<template>
<div id="app">
  <!-- <transition :name="transitionName"> -->
      <router-view class="child-view"></router-view>
  <!-- </transition> -->
</div>
</template>

<script>
export default {
  name: 'app',
  components: {},
  data() {
    return {
       transitionName:"slide-left"
    }
  },
  created() {
    
  },
  methods: {

  },
  watch: {
	  '$route' (to, from) {
		let isBack = this.$router.isBack;
		if(isBack){
			this.$router.isBack = false;
			this.transitionName = 'slide-right';
		}else{
			this.transitionName = 'slide-left';
		}
	  }
  }
}
</script>

<style lang="scss">
  @import "./style/style.scss";


.child-view {
  position: absolute;
  width:100%;
  transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(50px, 0);
  transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-50px, 0);
  transform: translate(-50px, 0);
}
</style>
